<template>
  <div>
    <div class="card">
      <div class="image" @click="navigateToDetail">
        <img :src="card.image || '/noimage.svg'" />
      </div>
      <div class="info">
        <div class="detail">
          <h3 v-if="!titleType" :title="card.name">{{ card.name }}</h3>
          <Input
            v-else
            :value="card.name"
            @change="handleTitle"
            @keyup.enter="changeTitleType(0)"
          />
          <p>{{ card.id }}</p>
        </div>
        <Dropdown>
          <div class="more_btn">
            <img class="more" src="@/UI/assets/more.svg" />
          </div>
          <template #drop>
            <DropdownList class="dropdown">
              <DropdownItem name="重命名" @click.stop="changeTitleType(1)"
                >重命名
              </DropdownItem>
              <DropdownItem name="复制" @click.stop="handleCopy">
                复制
              </DropdownItem>
              <DropdownItem name="导出"> 导出 </DropdownItem>
              <div class="divide"></div>
              <DropdownItem name="删除" @click.stop="active = !active">
                删除
              </DropdownItem>
            </DropdownList>
          </template>
        </Dropdown>
      </div>
    </div>
    <deleteProjectModal
      :active="active"
      :id="card.id"
      @changeActive="changeActive"
      @refresh="$emit('refresh')"
    />
  </div>
</template>
<script setup lang="ts">
import {
  Dropdown,
  DropdownList,
  DropdownItem,
  Button,
  Input,
  Toast,
} from "cax-ui";
import { ref, defineEmits, defineProps, watch, computed } from "vue";
import deleteProjectModal from "@/UI/components/projects/deleteProjectModal.vue";
import { updateProject, copyProject } from "@/UI/api/projects";
import { useRouter } from "vue-router";
import { useUserStore } from "@/UI/store";
const router = useRouter();
const userStore = useUserStore();
const titleType = ref(0); // 0为text，1为input
const active = ref(false);
const title = ref("");
const emits = defineEmits(["refresh"]);
const props = defineProps({
  card: {
    type: Object,
    default: () => {
      return {
        name: "这里是项目名称",
        id: "8762420584098497",
      };
    },
  },
});

watch(
  () => props.card,
  (newVal) => {
    title.value = newVal.name;
  }
);

function handleCopy() {
  console.log("copy");
  copyProject(props.card.id).then((res) => {
    console.log(res, "res");
    Toast.success({ content: "复制项目成功", duration: 1000 });
    emits("refresh");
  });
}
function handleTitle(value: string) {
  title.value = value;
}
function changeTitleType(value: number) {
  titleType.value = value;
  if (value === 1) return;
  updateProject({
    id: props.card.id,
    name: title.value,
    userId: userStore.userId,
  }).then((res) => {
    emits("refresh");
  });
}
function changeActive(value: boolean) {
  active.value = value;
}

function navigateToDetail() {
  router.push({
    name: "home",
    query: {
      id: props.card.id,
      dev: 1,
    },
  });
}
</script>
<style lang="less" scoped>
.card {
  box-sizing: border-box;
  overflow: hidden;
  height: 268px;
  border-radius: 4px;
  border: 1px solid #e9ecff;
  .image {
    box-sizing: border-box;
    width: 100%;
    height: 200px;
    border-radius: 4px 4px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #f8f9fa;
    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
  }
  .info {
    box-sizing: border-box;
    background-color: #ffffff;
    border-top: 1px solid #e9ecff;
    border-radius: 0 0 4px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 68px;
    padding: 12px 24px 12px;
    .detail {
      width: 274px;
      h3 {
        font-size: 14px;
        line-height: 22px;
        font-weight: 600;
        margin: 0;
        color: #212529;
        margin-bottom: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p {
        font-size: 12px;
        line-height: 20px;
        font-weight: 400;
        color: #868e96;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .more_btn {
      width: 32px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 2px;
      .more {
        width: 24px;
        height: 24px;
        font-size: 12px;
      }
      &:hover {
        background-color: #f3f4f6;
      }
    }
  }
  &:hover {
    border-color: #339af0;
    color: #339af0;
    cursor: pointer;
  }
}
:deep(.vxp-input) {
  height: 26px;
  width: max-content;
}
.dropdown {
  width: 160px;
  height: 149px;
  color: #495057;
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: normal;
  line-height: 22px;
  letter-spacing: 0em;
  border-radius: 1px solid #e9ecef;
  .divide {
    height: 1px;
    background-color: #e9ecef;
    margin: 4px 12px;
  }
}
</style>
